<html>
	<head>
	<style>
		ul,li {margin: 0; padding: 0; font-size: 14px;}
	</style>
    <script type="text/javascript" src="/static/js/jquery-1.10.2.js"></script>	
    <script type="text/javascript">
        var num_pages = {{page.num_pages}} ;
        var cur_page = 1;
        function loadPage(){
            if (cur_page >= num_pages) return;
            $("#listmore").hide();

            cur_page += 1;
            var tmp = document.getElementById("mainlist").innerHTML;
            $("#mainlist").load("/market/list/{{board.id}}/"+ cur_page +"/ #mainlist", function(responseTxt,statusTxt,xhr){
                        document.getElementById("mainlist").innerHTML = tmp + document.getElementById("mainlist").innerHTML;
                        if (cur_page >= num_pages){ 
                        $("#listmore").hide(); 
                        }else{

                        $("#listmore").show(); 
                        }
                    })
        }

        $(document).ready(function(){
            if (cur_page == num_pages){ $("#listmore").hide(); }
        })
        
    </script>
	</head>
    <body>

        <h1>Bang list</h1>
        <ul id="mainlist" style="padding::5px;">
            {% for bang in bang_list %}
            <li style="margin-bottom:5px;list-style:none; border-bottom:1px dotted #ccc; ">
            <span style="">[{{bang.owner.username}}]</span>
            <span style=""><a href="/circle/{{bang.id}}/">[{{bang.name}}]</a></span>
            <span style="">{{bang.desc}}</span>
            </li>
            {% endfor %} 
        </ul>

        <a id="listmore" style="" href="javascript:{loadPage();}">点击查看更多帖子</a>
    </body>
</html>

